*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{

    height: 100vh;
}


input[type='text']{

    padding: 8px 5px;
}

#frmProduct
{

    padding: 20px;
    width: 200px;
    display: grid;
    grid-template-rows: repeat(6,1fr);
    row-gap: 10px;
    border: 2px solid darkcyan;
    margin: 0 auto;
}




main{

    padding: 20px 200px;
}

main input{

    padding-bottom: 5px !important;
    outline: none;
   
    border:1px solid lightseagreen ;
    color: brown;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;


}
   


.toolbar{

    padding: 20px 0;
    display: grid;
    grid-template-columns: 7fr 3fr;
    border-top: 1px solid darkgreen;
    border-right: 1px solid darkgreen;
    border-left: 1px solid darkgreen;
}


button{
    padding: 5px;
    margin: 5px;
    font-size: 11x;
}

.row{

    display: grid;
    grid-template-columns: 0.5fr 2fr repeat(4,1fr)  2fr;
    height: 40px;
    border-bottom: 1px solid darkgreen;
    border-right: 1px solid darkgreen;
    border-left: 1px solid darkgreen;
}


main>section:first-of-type{
    border-top: 1px solid darkgreen;
    background-color: darkgreen;
    color: white;
}


.cell
{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 5px;
}

.cell > button{
    padding: 2px 8px;
    font-size: 10px;
    
    
}

a{

    display: inline-block;
    margin: 0 5px;
    text-decoration: none;
}

.footerbar
{

     border-bottom: 1px solid darkgreen;
    border-right: 1px solid darkgreen;
    border-left: 1px solid darkgreen;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

article
{
    display: none;
}


@media print{


    @page{

        size: A5 landscape;
    }


    #app > *{

        display: none;
    }


    .printrow{

        display: grid;
        grid-template-columns: 1fr 4fr 2fr 2fr 2fr 4fr;
        border-bottom: 0.1mm solid #000;
        font-size: 12px;
    }

    .printcell{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 0;
    }


    #app> article {
        display: block !important;
    }

}